<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="back-button" @click="goBack">
          <i class="el-icon-arrow-left"></i>
          <span>返回列表</span>
        </div>
        <h2 class="title">{{ equipmentInfo.name }} - 详细信息</h2>
      </div>
    </div>

    <!-- 基本信息卡片 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="8">
        <el-card shadow="hover" class="image-card">
          <div class="equipment-image">
            <el-image 
              :src="equipmentInfo.image" 
              :preview-src-list="[equipmentInfo.image]"
              fit="contain"
            />
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="16">
        <el-card shadow="hover" class="info-card">
          <div class="info-header">
            <h3>基本信息</h3>
            <el-tag :type="equipmentInfo.status === '0' ? 'success' : 'danger'">
              {{ equipmentInfo.status === '0' ? '正常' : '维护中' }}
            </el-tag>
          </div>
          
          <div class="info-content">
            <div class="info-item">
              <span class="label">装备类型：</span>
              <span class="value">{{ equipmentInfo.typeName }}</span>
            </div>
            <div class="info-item">
              <span class="label">总数量：</span>
              <span class="value highlight">{{ equipmentInfo.number }}</span>
            </div>
            <div class="info-item">
              <span class="label">维护人员：</span>
              <span class="value">{{ equipmentInfo.maintainer }}</span>
            </div>
            <div class="info-item">
              <span class="label">维护时间：</span>
              <span class="value">{{ equipmentInfo.maintainTime }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据统计卡片 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <div slot="header" class="clearfix">
            <span>军种分布</span>
          </div>
          <div class="chart-container">
            <div id="serviceTypeChart" style="height: 300px"></div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <div slot="header" class="clearfix">
            <span>尺码分布</span>
          </div>
          <div class="chart-container">
            <div id="sizeChart" style="height: 300px"></div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="stat-card">
          <div slot="header" class="clearfix">
            <span>使用状态</span>
          </div>
          <div class="chart-container">
            <div id="statusChart" style="height: 300px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细列表 -->
    <el-card shadow="hover" class="detail-list-card">
      <div slot="header" class="clearfix">
        <span>装备清单</span>
        <el-button style="float: right" type="text" icon="el-icon-download">导出清单</el-button>
      </div>
      
      <el-table :data="detailList" style="width: 100%" border>
        <el-table-column prop="id" label="编号" width="120" />
        <el-table-column prop="serviceType" label="军种" width="120">
          <template slot-scope="scope">
            <el-tag :type="getServiceTypeTag(scope.row.serviceType)">
              {{ scope.row.serviceType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="尺码" width="120" />
        <el-table-column prop="status" label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '在库' ? 'success' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastMaintainTime" label="最近维护时间" width="180" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'EquipmentDetail',
  data() {
    return {
      equipmentInfo: {},
      detailList: [],
      charts: {
        serviceType: null,
        size: null,
        status: null
      }
    }
  },
  created() {
    // 获取路由传递的参数
    const info = JSON.parse(this.$route.query.info || '{}')
    this.equipmentInfo = info
    
    // 生成模拟数据
    this.generateDetailList()
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    generateDetailList() {
      // 生成装备详细列表
      const serviceTypes = ['海军', '陆军', '空军']
      const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL']
      const statuses = ['在库', '借出', '维修中']
      
      this.detailList = Array.from({ length: this.equipmentInfo.number }, (_, index) => ({
        id: `EQ${String(index + 1).padStart(4, '0')}`,
        serviceType: serviceTypes[Math.floor(Math.random() * serviceTypes.length)],
        size: sizes[Math.floor(Math.random() * sizes.length)],
        status: statuses[Math.floor(Math.random() * statuses.length)],
        lastMaintainTime: this.equipmentInfo.maintainTime,
        remark: '正常使用中'
      }))
    },
    initCharts() {
      // 初始化军种分布图表
      this.charts.serviceType = echarts.init(document.getElementById('serviceTypeChart'))
      const serviceTypeData = this.getServiceTypeData()
      this.charts.serviceType.setOption({
        title: {
          text: '军种分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        series: [{
          type: 'pie',
          radius: '70%',
          data: serviceTypeData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      })

      // 初始化尺码分布图表
      this.charts.size = echarts.init(document.getElementById('sizeChart'))
      const sizeData = this.getSizeData()
      this.charts.size.setOption({
        title: {
          text: '尺码分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: sizeData.map(item => item.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: sizeData.map(item => item.value),
          type: 'bar',
          barWidth: '60%',
          itemStyle: {
            color: '#409EFF'
          }
        }]
      })

      // 初始化使用状态图表
      this.charts.status = echarts.init(document.getElementById('statusChart'))
      const statusData = this.getStatusData()
      this.charts.status.setOption({
        title: {
          text: '使用状态',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: statusData
        }]
      })
    },
    getServiceTypeData() {
      const counts = {}
      this.detailList.forEach(item => {
        counts[item.serviceType] = (counts[item.serviceType] || 0) + 1
      })
      return Object.entries(counts).map(([name, value]) => ({ name, value }))
    },
    getSizeData() {
      const counts = {}
      this.detailList.forEach(item => {
        counts[item.size] = (counts[item.size] || 0) + 1
      })
      return Object.entries(counts).map(([name, value]) => ({ name, value }))
    },
    getStatusData() {
      const counts = {}
      this.detailList.forEach(item => {
        counts[item.status] = (counts[item.status] || 0) + 1
      })
      return Object.entries(counts).map(([name, value]) => ({ name, value }))
    },
    getServiceTypeTag(type) {
      const tags = {
        '海军': 'primary',
        '陆军': 'success',
        '空军': 'warning'
      }
      return tags[type] || 'info'
    }
  },
  beforeDestroy() {
    // 销毁图表实例
    Object.values(this.charts).forEach(chart => {
      chart && chart.dispose()
    })
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  
  .page-header {
    margin-bottom: 20px;
    
    .header-content {
      display: flex;
      align-items: center;
      
      .back-button {
        cursor: pointer;
        margin-right: 20px;
        color: #909399;
        
        &:hover {
          color: #409EFF;
        }
        
        i {
          margin-right: 5px;
        }
      }
      
      .title {
        margin: 0;
        font-size: 20px;
        font-weight: 500;
        color: #303133;
      }
    }
  }
  
  .mb20 {
    margin-bottom: 20px;
  }

  .image-card {
    .equipment-image {
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .el-image {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }

  .info-card {
    height: 300px;
    
    .info-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
      }
    }

    .info-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;

      .info-item {
        .label {
          color: #909399;
          margin-right: 10px;
        }

        .value {
          color: #303133;
          
          &.highlight {
            color: #409EFF;
            font-size: 18px;
            font-weight: bold;
          }
        }
      }
    }
  }

  .stat-card {
    .chart-container {
      height: 300px;
    }
  }

  .detail-list-card {
    .el-table {
      margin-top: 20px;
    }
  }
}
</style>
